<template>
	<view class="container">
		<view class="flex_start nav_box">
			<view :class="active < 1 ? 'nav_item nav_item_act flex_start':'nav_item flex_start'" @click="navTab(0)">
				全部
			</view>
			<view :class="active == 1 ? 'nav_item nav_item_act':'nav_item'" @click="navTab(1)">实时用工</view>
		</view>
		<view class="employ_part" v-for="(item,index) in employList" :key="index">
			<view class="count" v-if="item.notScan > 0">{{item.notScan}}</view>
			<view class="top_part"  @click="recruitDetail(item.id)">
				<view class="left">
					<view class="name">
						{{item.title}}
					</view>
					<view class="distance_address">
						{{item.city}} &nbsp;&nbsp;{{item.address}}
					</view>
					<!-- {{item.positionLabel}} -->
					<view class="types">
						<view class="type_item" v-for="(type,i) in item.positionLabel" :key="i" v-if="i<4">
							{{type}}
						</view>
					</view>
					<view class="company_person">
						<image :src="item.avatar?  item.avatar:'../../static/img/myCenter/girl.png'"></image>
						<text>{{item.nickname}} &nbsp;|&nbsp;招聘者</text>
					</view>
					
				</view>
				<view class="right">
					<view class="distance_address">
						{{item.publishType}}
					</view>
					<view class="money">
						￥{{item.salary}}
					</view>
					<view class="distance" v-if="item.joinNum">已有{{item.joinNum}}人参加</view>
					<view class="go_rob" v-if="item.status===0">
					     招聘中
					</view>
					<view class="go_rob" v-if="item.status===0&&item.publishType=='全职招聘'">
					  开直播
					</view>
					<view class="go_rob" v-if="item.status===1">
					     已招到
					</view>
					<view v-if="item.status===2" class="go_rob no_bgc">
						未招到
					</view>
					
				</view>
						
			</view>
			<view class="bottom_part">
				<view class="accept_part">
					<image src="../../static/img/refresh.png" mode=""></image>
					<view  class="refresh">
						刷新
					</view>
					<image src="../../static/img/down.png" mode="" class="down"></image>
					<view class="" v-if="item.disabled" @click="recruitDisabled(item.id)">
						下架
					</view>
					<view class="" v-else @click="recruitDisabledyes(item.id)">
						上架
					</view>
					<view class="xiugai" style="margin-left: 30rpx;" @click="edit(item)">
						<image style="width: 33rpx; height: 30rpx;" src="../../static/img/edit.png" mode=""></image>
						<text>修改</text>
					</view>
					<view class="" style="margin-left: 60rpx;" @click.stop="findDatail(item.id)">
						查看详情
					</view>	
				</view>
				<view class="">
					<image style="height: 35rpx;" src="../../static/img/rubbish.png" @click="recruitDelete(item.id)" mode=""></image>
				</view>
			</view>
			<uni-popup   ref="popup" type="bottom">
				<view class="pop">
					<label class="radio">
						<radio value="1" name="radio" :checked="checked===1" @click="radio(1)"/><text>已招到</text>
						<radio value="2" name="radio" :checked="checked===2" @click="radio(2)"/><text>未招到</text>
						<!-- <text style="margin-left: 50%;" @click="close()">关闭</text> -->
					</label>
					<button class="btn" type="default" @click="recruitStatus(item.id)">确定</button>
				</view>
			</uni-popup>
		</view>
	
		<view class="reach_bottom">
			~暂无更多内容~
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				active:0,
				employList: [],
				show_pop:false,
				checked:1,
				info:{
					status: 99,
					page:1,
					pageSize: 20
				},
				total: 0,
			}
		},
		components:{
			uniPopup,
		},
		mounted() {
		},
		onShow() {
			this.active = 0
			this.getRecruitList()
		},
		methods: {
			navTab(index) {
				this.active = index
				switch (this.active){
					case 0:
						this.getRecruitList()
						break;
					case 1:
						this.getMyTimeOrder()
						break;
					default:
						break;
				}
			},
			getRecruitList(){
				this.$utils.requert({url:'RecruitList',data:{
						publishType:''
					},type:'post'}).then(res=>{
						if(res.code === 1 ){
							this.employList = res.data
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			getMyTimeOrder(tag){ //实时用工-我的发布-发布人
				this.$utils.requert({url:'myTimeOrder',data:this.info,type:'post'}).then(res=>{
						if(res.code === 1 ){
							this.total = Math.ceil(res.data.total / this.info.pageSize)
							let datas = res.data.data
							datas.forEach((element)=>{
								element.positionLabel = element.positionLabel.split(',')
							})
							if(tag){
								this.employList = this.employList.concat(datas)
							}else {
								this.employList = datas
							}
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			recruitDelete(id){
				let _this=this
				uni.showModal({
					title: '确认',
					content: '确认是否删除此招聘信息?',
					success: function (res) {
						if (res.confirm) {
							_this.$utils.requert({url:'recruitDelete',data:{recruitId:id},type:'post'}).then(res=>{
								if(res.code === 1 ){
									_this.$utils.showLayer(res.message)
									_this.getRecruitList()
								}else{    
									_this.$utils.showLayer(res.message)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});	
				
			},
			findDatail(id){
				switch (this.active){
					case 0:
						uni.navigateTo({
							url:"/pages/jobDetail/jobDetail?type=public&id=" + id
						})
						break;
					case 1:
						uni.navigateTo({
							url:"/pages/jobDetail/jobDetail?type=realtime&id=" + id
						})
						break;
					default:
						break;
				}
			},
			//查看详情
			recruitDetail(id){
				switch (this.active){
					case 0:
						uni.navigateTo({
							url:"/pages/requireJobList/requireJobList?type=public&id=" + id
						})
						break;
					case 1:
						uni.navigateTo({
							url:"/pages/requireJobList/requireJobList?type=realtime&id=" + id
						})
						break;
					default:
						break;
				}
			},
			//下架
			recruitDisabled(id){
				let _this=this
				uni.showModal({
					title: '确认',
					content: '确认是否下架该招聘信息',
					success: function (res) {
						if (res.confirm) {
							_this.$utils.requert({url:'recruitDisabled',data:{recruitId:id,disabled:0},type:'post'}).then(res=>{
								if(res.code === 1 ){
									_this.$utils.showLayer(res.message)
									_this.getRecruitList()
								}else{    
									_this.$utils.showLayer(res.message)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});	
			},
			recruitDisabledyes (id) {
				this.$utils.requert({url:'recruitDisabled',data:{recruitId:id,disabled:1},type:'post'}).then(res=>{
					if(res.code === 1 ){
						this.$utils.showLayer(res.message)
						this.getRecruitList()
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			//招聘状态修改
			recruitStatus(id){
				
				this.$utils.requert({url:'recruitStatus',data:{recruitId:id,status:this.checked},type:'post'}).then(res=>{
					
						if(res.code === 1 ){
							this.$utils.showLayer(res.message)
							this.$refs.popup[3].close()
							this.getRecruitList()
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			edit(item){
				switch (this.active){
					case 0:
						uni.navigateTo({
							url:'/pages/fullTimeJob/fullTimeJob?edit=true&obj='+JSON.stringify(item)
						})
						break;
					case 1:
						uni.navigateTo({
							url:'/pages/actualJobInfo/actualJobInfo?edit=true&obj='+JSON.stringify(item)
						})
						break;
					default:
						break;
				}
				console.log(item)
			},
			close(){
				
			},
			//单选框
			radio(num){
				this.checked = num
			}
		},
		onPullDownRefresh(){ //下拉刷新
			this.info.page = 1
			this.getMyTimeOrder()
			uni.stopPullDownRefresh()
		},
		onReachBottom(){ //上垃加载
			if(this.info.page < this.total && this.active == 1) {
				this.info.page++
				this.getMyTimeOrder(true)
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.nav_box{
		width: 100%;
		font-size: 30rpx;
		height: 88rpx;
		background: white;
		z-index: 9;
		font-weight: 100;
	}
	.nav_item{
		margin-right: 30rpx;
	}
	.nav_item_act{
		color: #FCA601;
	}
	.container {
		width: 100%;
		height: 100%;
		padding:0 23rpx 38rpx;
		box-sizing: border-box;
	}
	.employ_part{
		padding:40rpx 8rpx;
		/* display: flex;
		justify-content: space-between;
		position: relative; */
		border:1rpx solid #f6f6f6;
		margin-bottom: 30rpx;
		border-radius: 7rpx;
		position: relative;
	}
	.count{
		width: 30rpx;
		height: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: white;
		background: red;
		border-radius: 50%;
		position: absolute;
		top: -20rpx;
		right: 0;
	}
	.top_part{
		display: flex;
		justify-content: space-between;
		position: relative;
				margin-bottom: 30rpx;
	}
	.employ_part .name{
		font-size: 31rpx;
		color:#323232;
	}
	 .distance_address{
		font-size: 24rpx;
		color: #838282;
	}
	.left .distance_address{
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.employ_part .types{
		display: flex;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		flex-wrap: wrap;
	}
	.employ_part .types .type_item{
		padding:0 8rpx;
		border:1rpx solid #f6f6f6;
		font-size: 25rpx;
		color: #FB8408;
		margin-right: 16rpx;
		flex-shrink: 0;
		margin-bottom: 15rpx;
	}
	.employ_part .types .type_item:nth-child(2){
		color: #3185ed;
	}
	.employ_part .types .type_item:nth-child(3){
		color: #fd4f44;
	}
	.company_person{
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
		width: 100%;
	}
	.company_person image{
		width:42rpx;
		height: 42rpx;
		border-radius: 50%;
		margin-right: 17rpx;
	}

	.right{
	 text-align: right;
	 flex-shrink: 0;
	 width: 20%;
	}
	.left{
		flex: 1;
	 width: 20%;
	}
	.right .xiugai{
		margin-left: auto;
		display: flex;
		align-items: center;
		color: #7a7a7a;
		font-size: 24rpx;
		margin-top: 30rpx;
	}
	.xiugai{
		margin-left: auto;
		display: flex;
		align-items: center;
		color: #C9C6C6;
		font-size: 24rpx;
	}
	.right .xiugai image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.right .money{
		font-size: 28rpx;
		color:#FB8408;
	}
	.go_rob{
		width: 137rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color:#Fff;
		background-color: #FFA008;
		font-size: 28rpx;
		/* position: absolute;
		bottom: 40rpx; */
		margin-top: 10rpx;
		margin-left: auto;
		border-radius: 7rpx;
	}
	.bottom_part{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top:1rpx solid #f6f6f6;
		padding:30rpx 20rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #C9C6C6;
	}
	.bottom_part .accept_part{
		display: flex;
		align-items: center;
		
	}
	.bottom_part  image:nth-child(3){
		width: 30rpx;
		height: 32rpx;
	}
	.bottom_part  image:nth-child(1){
		width: 37rpx;
		height: 26rpx;
	}
	.bottom_part  image:nth-child(2){
		width: 33rpx;
		height: 30rpx;
	}
	.bottom_part  image:nth-child(1){
		margin-right: 10rpx;
	}
	.bottom_part  .down{
		margin-right: 20rpx;
	}
	.reach_bottom{
		margin-top:35rpx;
		text-align: center;
		font-size: 28rpx;
		color: #D5D1D1;
	}
	.no_bgc{
		background-color: #ccc;
	}
	.refresh{
		margin-right: 30rpx;
	}
	.pop {
		background-color: #fff;
	}
	.pop .radio{
		display: flex;
		height: 100rpx;
		width: 100%;
		align-items: center;
		font-size: 30rpx;
	}
	.pop .btn{
		width: 150rpx;
		font-size: 24rpx;
		background-color: #007AFF;
		color: #fff;
		margin: 0;
		margin-left: auto;
		margin-right: 40rpx;
	}
</style>
